<template>
  <div>
    <NavHeader @add="add" />
    <NavMain :list="list" @del="del" />
    <NavFooter :list="list" @clear="clear" />
  </div>
</template>
<script>
import NavHeader from "@/components/navHeader";
import NavMain from "@/components/navMain";
import NavFooter from "@/components/navFooter";
import { defineComponent, computed, onMounted, onUnmounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "Home",
  props: {},
  components: {
    NavHeader,
    NavMain,
    NavFooter,
  },
  setup() {
    onMounted(() => {
      // 组件加载时执行
      // 1，发起请求
      // 2，数据初始化操作，比如接受路由传参
    });
    onUnmounted(() => {
      // 组件卸载时执行
    });
    // 获取stroe
    let store = useStore();
    // 通过计算属性获取list
    let list = computed(() => {
      return store.state.list;
    });
    // 增加任务
    let add = (val) => {
      let flag = true;
      // 判断列表中是否存在该任务
      list.value.map((item) => {
        if (item.title === val) {
          flag = false;
          alert("已经有相同的任务存在");
        }
      });
      if (flag) {
        // 提交任务
        store.commit("addTodo", {
          title: val,
          complete: false,
        });
      }
    };
    // 删除任务
    let del = (val) => {
      store.commit("delTodo", val);
    };
    // 清除已完成任务
    let clear = (val) => {
      store.commit("clearTodo", val);
    };
    return {
      list,
      add,
      del,
      clear,
    };
  },
});
</script>
<style lang="scss" scoped></style>
